<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>

<head>
    <base href="/oa1/" />
    <title>襄阳蓝芯智能化办公系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="static/bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
    <link href="static/bootstrapvalidator/css/bootstrapValidator.css"
          rel="stylesheet">

    <script src="static/jquery/jquery-1.10.2.min.js"></script>
    <script src="static/bootstrap-3.3.5/js/bootstrap.min.js"></script>
    <script src="static/bootstrapvalidator/js/bootstrapValidator.js"></script>

</head>
<body>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 class="panel-title">发送短消息</h4>
    </div>

    <form action="xx/duanxiaoxi/sendMsg" enctype="multipart/form-data" id="myform" method="post" class="form-horizontal" role="form">
        <div class="panel-body">
            <div class="form-group col-md-12">
                <label for="biaoti" class="col-md-2 control-label">消息主题</label>
                <div class="col-md-8">
                    <input type="text" id="biaoti" name="biaoti" class="form-control"
                           placeholder="请输入主题">
                </div>
            </div>

            <div class="form-group col-md-12">
                <label for="neirong" class="col-md-2 control-label">消息内容</label>
                <div class="col-md-8">
						<textarea class="form-control" id="neirong" name="neirong"
                                  rows="10" placeholder="请输入消息内容"></textarea>
                </div>
            </div>

            <div class="form-group col-md-12">
                <label for="empids" class="col-md-2 control-label">消息接受人</label>
                <div class="col-md-8">
                    <input type="hidden" id="empids" name="empids">
                    <div class="input-group">
							<span class="input-group-btn">
								<button class="btn btn-info" type="button" data-toggle="modal"
                                        data-target="#selectempsModal">请选择</button>
							</span>
                        <input type="text" id="jieshounames" name="jieshounames"
                               readonly="readonly" class="form-control" placeholder="请选择接受人">
                    </div>
                </div>
            </div>

            <div class="form-group col-md-12">
                <label for="file" class="col-md-2 control-label">消息附件(最大20M)</label>
                <div class="col-md-8">
                    <input type="file" id="file" name="file"></input>
                </div>
            </div>

            <div class="form-group col-md-12">
                <div class="col-md-10  col-md-offset-2">
                    <button type="submit" id="editdeptbtn" class="btn btn-success">确认发送</button>
                    <button type="reset" id="resetbtn" class="btn btn-default">清空消息</button>
                </div>
            </div>
        </div>
    </form>
</div>



<div class="modal fade" id="selectempsModal" tabindex="-1" role="dialog"
     aria-labelledby="selectempsModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-hidden="true">&times;</button>
                <h4 class="modal-title" id="selectempsModalLabel">选择员工</h4>
            </div>
            <form action="" class="form-horizontal" role="form">
                <div class="modal-body">
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="dept" class="col-md-4 control-label">所属部门</label>
                            <div class="col-md-8">
                                <select name="dept" class="form-control" id="dept">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group col-md-6">
                            <label for="job" class="col-md-4 control-label">所属职位</label>
                            <div class="col-md-8">
                                <select name="job" class="form-control" id="job">
                                    <option value="">--请选择--</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="form-group col-md-6">
                            <label for="leftemp" class="col-md-4 control-label">员工信息</label>
                            <div class="col-md-8">
                                <select name="leftemp" multiple="multiple" class="form-control"
                                        id="leftemp" size="10">
                                    <option value="" disabled="disabled">------未选择------</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group col-md-6">
                            <div class="col-md-4" align="center">
                                <div class="row">
                                    <BR>
                                    <button type="button" id="rightAll" class="btn btn-info btn-block">
                                        <i class="glyphicon glyphicon-forward"></i>
                                    </button>
                                    <button type="button" id="rightSelected" class="btn btn-info btn-block">
                                        <i class="glyphicon glyphicon-chevron-right"></i>
                                    </button>
                                    <button type="button" id="leftSelected" class="btn btn-info btn-block">
                                        <i class="glyphicon glyphicon-chevron-left"></i>
                                    </button>
                                    <button type="button" id="leftAll" class="btn btn-info btn-block">
                                        <i class="glyphicon glyphicon-backward"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <select name="emp" multiple="multiple" class="form-control"
                                        id="emp" size="10">
                                    <option value="" disabled="disabled">------已选择------</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" id="sub" class="btn btn-primary">确认选择</button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
    $(document).ready(function() {
        $.getJSON("hr/zz-department/listDeptUseSelect", function(listdept) {
            var dept = $("#dept")[0];
            dept.options.length = 1;
            for (var i = 0; i < listdept.length; i++) {
                var d = listdept[i];
                dept.options.add(new Option(d.deptName, d.oid));
            }
        });

        $("#dept").change(function() {
            $("#job")[0].options.length=1;
            $("#leftemp")[0].options.length=1;
            if(this.value==""){
                return;
            }
            $.getJSON("hr/zz-department-job/listDeptJobUseSelect", {
                deptid : this.value
            }, function(listjob) {
                var job = $("#job")[0];
                job.options.length = 1;
                for (var i = 0; i < listjob.length; i++) {
                    var job1 = listjob[i];
                    job.options.add(new Option(job1.jobName, job1.jobid));
                }
            });

            $.getJSON("hr/emp/listEmpUseSelect", {
                deptid : $("#dept").val()
            }, function(emps) {
                var emp = $("#leftemp")[0];
                emp.options.length = 1;
                for (var i = 0; i < emps.length; i++) {
                    var e = emps[i];
                    emp.options.add(new Option(e.empName, e.oid));
                }
            });
        });

        $("#job").change(function() {
            $.getJSON("hr/emp/listEmpUseSelect", {
                deptid : $("#dept").val(),
                jobid : this.value
            }, function(emps) {
                var emp = $("#leftemp")[0];
                emp.options.length = 1;
                for (var i = 0; i < emps.length; i++) {
                    var e = emps[i];
                    emp.options.add(new Option(e.empName, e.oid));
                }
            });
        });

        $("#rightAll").click(function(){
            var count=$("#leftemp option").length;
            for(var i=1;i<count;i++){
                var option = $("#leftemp option")[1];
                if($("#emp option[value="+option.value+"]").length==0){
                    $("#emp")[0].options.add(new Option($(option).text(),$(option).val()));
                }
                $(option).remove();
            }
        });

        $("#rightSelected").click(function(){
            var count=$("#leftemp option:selected").length;
            for(var i=0;i<count;i++){
                var option = $("#leftemp option:selected")[0];
                if($("#emp option[value="+option.value+"]").length==0){
                    $("#emp")[0].options.add(new Option($(option).text(),$(option).val()));
                }
                $(option).remove();
            }
        });

        $("#leftAll").click(function(){
            var count=$("#emp option").length;
            for(var i=1;i<count;i++){
                var option = $("#emp option")[1];
                if($("#leftemp option[value="+option.value+"]").length==0){
                    $("#leftemp")[0].options.add(new Option($(option).text(),$(option).val()));
                }
                $(option).remove();
            }
        });

        $("#leftSelected").click(function(){
            var count=$("#emp option:selected").length;
            for(var i=0;i<count;i++){
                var option = $("#emp option:selected")[0];
                if($("#leftemp option[value="+option.value+"]").length==0){
                    $("#leftemp")[0].options.add(new Option($(option).text(),$(option).val()));
                }
                $(option).remove();
            }
        });


        $("#sub").click(function() {
            var eid = $("#emp option");
            if (eid.length>1) {
                var eids = "";
                var empNames = "";
                $("#emp option").each(function(index) {
                    if(index==0){
                        return;
                    }
                    eids += $(this).val()+',';
                    empNames += $(this).text()+',';
                });
                eids=eids.slice(0,-1);
                empNames=empNames.slice(0,-1);
                setempvalue(eids, empNames);
                $('#selectempsModal').modal('hide');
            } else {
                alert("请选择员工");
            }

        });

        $('#selectempsModal').on('show.bs.modal', function() {
            $("#dept").val("");
            $("#job")[0].options.length = 1;
            $("#leftemp")[0].options.length = 1;
        });
    });
</script>






<script type="text/javascript">
    $(document).ajaxError(function(event,xhr) {
        if(xhr.status=="403"){//没有权限
            document.location.href = xhr.getResponseHeader("url");
        }else if(xhr.status!="200"){
            //alert("服务器错误!");
            console.log("服务器错误!");
        }
    });
</script>
<script type="text/javascript">
    function setempvalue(eids, empNames) {
        $("#empids").val(eids);
        $("#jieshounames").val(empNames);
        $("#myform").data('bootstrapValidator').updateStatus('jieshounames', 'NOT_VALIDATED').validateField('jieshounames');
    }
</script>
</body>


<script type="text/javascript">
    $(document).ready(function() {
        $("#myform").bootstrapValidator({
            message : 'This value is not valid',
            feedbackIcons : {/*input状态样式图片*/
                valid : 'glyphicon glyphicon-ok',
                invalid : 'glyphicon glyphicon-remove',
                validating : 'glyphicon glyphicon-refresh'
            },
            fields : {
                biaoti : {
                    validators : {
                        notEmpty : {/*非空提示*/
                            message : '消息主题不能为空'

                        },
                        stringLength : {
                            min : 1,
                            max : 50,
                            message : '消息主题长度需在1-50位'
                        }
                    }
                },
                jieshounames : {
                    validators : {
                        notEmpty : {/*非空提示*/
                            message : '请选择消息接受人'

                        }
                    }
                }
            },
            submitHandler : function(validator, form, submitButton) {
                validator.defaultSubmit();
            }
        });

        $("#resetbtn").click(function() {
            $("#emp")[0].options.length = 1;
            $("#myform").data("bootstrapValidator").resetForm();
        });
    });
</script>
</html>